//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：index.js
// 创建时间：2016年09月22日
// 创建人员：Panda
// 功能说明：全局toast组件
//################################

'use strict';

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Dimensions,
    TouchableWithoutFeedback,
} from 'react-native';

import {
    PubSubTopics,
    FontSizes,
    Colors,
} from '../../common';

import LinearGradient from 'react-native-linear-gradient';
import PubSub from 'pubsub-js';

import Modal from '../modal';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;

class ToastModal extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            isOpen: false,
            toastMessage: '',
        };
    }

    componentDidMount() {
        this.onToastModalOpenEvent = PubSub.subscribe(PubSubTopics.TOAST_MODAL_OPEN, (event, toastMessage) => {this.onToastModalOpenHandler(toastMessage)});
    }
    
    componentWillUnmount() {
        PubSub.unsubscribe(this.onToastModalOpenEvent);
    }

    onToastModalOpenHandler(toastMessage) {
        this.setState({
            isOpen: true,
            toastMessage: toastMessage,
        });

        this.timer = setTimeout(() => {
            this.setState({
                isOpen: false,
            });
        }, 3000);
    }

    closeToast() {
        this.timer && clearTimeout(this.timer);

        this.setState({
            isOpen: false,
        });
    }
    
    render() {
        return (
            <Modal isOpen={this.state.isOpen} backdropPressToClose={true} isBackdropColorTransparent={true}>
                <TouchableWithoutFeedback onPress={() => {this.closeToast()}}>
                <View style={styles.container}>
                    <View  style={styles.toastview}>
                        <Text style={styles.toasttext}>{this.state.toastMessage}</Text>
                    </View>
                </View>
                </TouchableWithoutFeedback>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: WINDOW_WIDTH,
        height: WINDOW_HEIGHT,
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'center',
    },
    splitter: {
        flexDirection: 'row',
        height: 0,
        width: WINDOW_WIDTH,
        borderWidth: 1,
        borderColor: '#37B9D0'
    },
    toastview: {
        width: WINDOW_WIDTH*2/3,
        borderRadius:20,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor:'black',
        opacity:0.8,
    },
    toasttext: {
        marginTop: 20,
        marginBottom: 20,
        marginLeft: 18,
        marginRight: 18,
        fontSize: FontSizes.toastText,
        color: Colors.toastText,
    },
});

export default ToastModal;